Text container
Use this component to add vertical spacing between headings, paragraphs, and lists. You can also use it to optimize the reading experience of long-form content.
#Examples
Our block-level typography components (heading, paragraph, and list) don't have any margin by default. This is intentional and desires in most UI contexts. However, it also means multiple consecutive typography components will stick together. That is where the text container component comes in. By wrapping the typograhy components in a text-container, approporaite vertical spacing will automatically be applied between the components.
#Default
Here you can see an example of how the text container with default property settings automatically applies appropriate vertical spacing between consecutive typographic components.
Heading 1
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus erat rhoncus bibendum cursus. Maecenas a lorem egestas lorem porttitor scelerisque vel ac ante. Pellentesque ac ullamcorper libero. Cras consectetur sem nunc, nec rhoncus justo porta quis.Mauris sapien tellus, mattis ac pharetra et, accumsan pharetra felis.
Ut cursus condimentum urna, vel pellentesque mauris iaculis nec. Proin ac mauris est. Suspendisse mollis rutrum dui, mattis cursus nunc dictum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading 3
- Ut et varius justo, id molestie massa.
- Cras mattis urna at sapien tempor, ac hendrerit neque dignissim
- Sed iaculis leo vitae nunc auctor maximus.
Heading 4
- Integer sodales vulputate pellentesque.
- Pellentesque hendrerit et nisi quis aliquet.
- Mauris sapien tellus, mattis ac pharetra et.
Heading 5
Fusce quis nulla ut odio hendrerit commodo. Nunc sed cursus erat. Nam ullamcorper sem est, at molestie justo egestas sed. Etiam lectus quam, facilisis sed ipsum ut, tincidunt pretium ex. Nam at condimentum eros. Cras mattis urna at sapien tempor, ac hendrerit neque dignissim. Nunc sed elementum purus, ac pulvinar orci. Vivamus lacinia elementum lorem, quis tincidunt diam. Suspendisse semper lobortis quam, eget semper elit tempus ac.
Heading 6
Donec condimentum, mi tincidunt mollis consectetur, arcu leo porttitor velit, ultrices accumsan ante odio at dui. Sed eget laoreet lorem. Morbi imperdiet quam et suscipit efficitur. Fusce orci tortor, bibendum et tempus et, consectetur bibendum ante. Curabitur nulla risus, vestibulum in laoreet vitae, consectetur pharetra ex. Curabitur porttitor placerat metus in aliquet. Nunc scelerisque quam est, feugiat laoreet dui mattis semper.
<TextContainer>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus erat rhoncus bibendum
cursus. Maecenas a lorem egestas lorem porttitor scelerisque vel ac ante. Pellentesque ac
ullamcorper libero. Cras consectetur sem nunc, nec rhoncus justo porta quis.Mauris sapien
tellus, mattis ac pharetra et, accumsan pharetra felis.
</Paragraph>
<Paragraph>
Ut cursus condimentum urna, vel pellentesque mauris iaculis nec. Proin ac mauris est.
Suspendisse mollis rutrum dui, mattis cursus nunc dictum a. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</Paragraph>
<H3>Heading 3</H3>
<Ul
items={[
"Ut et varius justo, id molestie massa.",
"Cras mattis urna at sapien tempor, ac hendrerit neque dignissim",
"Sed iaculis leo vitae nunc auctor maximus.",
]}
/>
<H4>Heading 4</H4>
<Ol
items={[
"Integer sodales vulputate pellentesque.",
"Pellentesque hendrerit et nisi quis aliquet.",
"Mauris sapien tellus, mattis ac pharetra et.",
]}
/>
<H5>Heading 5</H5>
<Paragraph>
Fusce quis nulla ut odio hendrerit commodo. Nunc sed cursus erat. Nam ullamcorper sem est, at
molestie justo egestas sed. Etiam lectus quam, facilisis sed ipsum ut, tincidunt pretium ex.
Nam at condimentum eros. Cras mattis urna at sapien tempor, ac hendrerit neque dignissim. Nunc
sed elementum purus, ac pulvinar orci. Vivamus lacinia elementum lorem, quis tincidunt diam.
Suspendisse semper lobortis quam, eget semper elit tempus ac.
</Paragraph>
<H6>Heading 6</H6>
<Paragraph>
Donec condimentum, mi tincidunt mollis consectetur, arcu leo porttitor velit, ultrices
accumsan ante odio at dui. Sed eget laoreet lorem. Morbi imperdiet quam et suscipit efficitur.
Fusce orci tortor, bibendum et tempus et, consectetur bibendum ante. Curabitur nulla risus,
vestibulum in laoreet vitae, consectetur pharetra ex. Curabitur porttitor placerat metus in
aliquet. Nunc scelerisque quam est, feugiat laoreet dui mattis semper.
</Paragraph>
</TextContainer>#Article
Some pages, such as product teaser pages, feature a large number of consecutive typographic components. This is called long-form content. The text container component has an article property to optimize the reading experience of such content. This property increases the font-size and adjusts the spacing, font-weights and line-heights of the typographic components inside the text-container.
Heading 1
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus erat rhoncus bibendum cursus. Maecenas a lorem egestas lorem porttitor scelerisque vel ac ante. Pellentesque ac ullamcorper libero. Cras consectetur sem nunc, nec rhoncus justo porta quis.Mauris sapien tellus, mattis ac pharetra et, accumsan pharetra felis.
Ut cursus condimentum urna, vel pellentesque mauris iaculis nec. Proin ac mauris est. Suspendisse mollis rutrum dui, mattis cursus nunc dictum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading 3
- Ut et varius justo, id molestie massa.
- Cras mattis urna at sapien tempor, ac hendrerit neque dignissim
- Sed iaculis leo vitae nunc auctor maximus.
Heading 4
- Integer sodales vulputate pellentesque.
- Pellentesque hendrerit et nisi quis aliquet.
- Mauris sapien tellus, mattis ac pharetra et.
Heading 5
Fusce quis nulla ut odio hendrerit commodo. Nunc sed cursus erat. Nam ullamcorper sem est, at molestie justo egestas sed. Etiam lectus quam, facilisis sed ipsum ut, tincidunt pretium ex. Nam at condimentum eros. Cras mattis urna at sapien tempor, ac hendrerit neque dignissim. Nunc sed elementum purus, ac pulvinar orci. Vivamus lacinia elementum lorem, quis tincidunt diam. Suspendisse semper lobortis quam, eget semper elit tempus ac.
Heading 6
Donec condimentum, mi tincidunt mollis consectetur, arcu leo porttitor velit, ultrices accumsan ante odio at dui. Sed eget laoreet lorem. Morbi imperdiet quam et suscipit efficitur. Fusce orci tortor, bibendum et tempus et, consectetur bibendum ante. Curabitur nulla risus, vestibulum in laoreet vitae, consectetur pharetra ex. Curabitur porttitor placerat metus in aliquet. Nunc scelerisque quam est, feugiat laoreet dui mattis semper.
<TextContainer article>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus erat rhoncus bibendum
cursus. Maecenas a lorem egestas lorem porttitor scelerisque vel ac ante. Pellentesque ac
ullamcorper libero. Cras consectetur sem nunc, nec rhoncus justo porta quis.Mauris sapien
tellus, mattis ac pharetra et, accumsan pharetra felis.
</Paragraph>
<Paragraph>
Ut cursus condimentum urna, vel pellentesque mauris iaculis nec. Proin ac mauris est.
Suspendisse mollis rutrum dui, mattis cursus nunc dictum a. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</Paragraph>
<H3>Heading 3</H3>
<Ul
items={[
"Ut et varius justo, id molestie massa.",
"Cras mattis urna at sapien tempor, ac hendrerit neque dignissim",
"Sed iaculis leo vitae nunc auctor maximus.",
]}
/>
<H4>Heading 4</H4>
<Ol
items={[
"Integer sodales vulputate pellentesque.",
"Pellentesque hendrerit et nisi quis aliquet.",
"Mauris sapien tellus, mattis ac pharetra et.",
]}
/>
<H5>Heading 5</H5>
<Paragraph>
Fusce quis nulla ut odio hendrerit commodo. Nunc sed cursus erat. Nam ullamcorper sem est, at
molestie justo egestas sed. Etiam lectus quam, facilisis sed ipsum ut, tincidunt pretium ex.
Nam at condimentum eros. Cras mattis urna at sapien tempor, ac hendrerit neque dignissim. Nunc
sed elementum purus, ac pulvinar orci. Vivamus lacinia elementum lorem, quis tincidunt diam.
Suspendisse semper lobortis quam, eget semper elit tempus ac.
</Paragraph>
<H6>Heading 6</H6>
<Paragraph>
Donec condimentum, mi tincidunt mollis consectetur, arcu leo porttitor velit, ultrices
accumsan ante odio at dui. Sed eget laoreet lorem. Morbi imperdiet quam et suscipit efficitur.
Fusce orci tortor, bibendum et tempus et, consectetur bibendum ante. Curabitur nulla risus,
vestibulum in laoreet vitae, consectetur pharetra ex. Curabitur porttitor placerat metus in
aliquet. Nunc scelerisque quam est, feugiat laoreet dui mattis semper.
</Paragraph>
</TextContainer>#External HTML
As you can see in the example below, the text container component also works in combination with our external html component.
Heading 1
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus erat rhoncus bibendum cursus. Maecenas a lorem egestas lorem porttitor scelerisque vel ac ante. Pellentesque ac ullamcorper libero. Cras consectetur sem nunc, nec rhoncus justo porta quis.Mauris sapien tellus, mattis ac pharetra et, accumsan pharetra felis.
Ut cursus condimentum urna, vel pellentesque mauris iaculis nec. Proin ac mauris est. Suspendisse mollis rutrum dui, mattis cursus nunc dictum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading 3
- Ut et varius justo, id molestie massa.
- Cras mattis urna at sapien tempor, ac hendrerit neque dignissim
- Sed iaculis leo vitae nunc auctor maximus.
Heading 4
- Integer sodales vulputate pellentesque.
- Pellentesque hendrerit et nisi quis aliquet.
- Mauris sapien tellus, mattis ac pharetra et.
Heading 5
Fusce quis nulla ut odio hendrerit commodo. Nunc sed cursus erat. Nam ullamcorper sem est, at molestie justo egestas sed. Etiam lectus quam, facilisis sed ipsum ut, tincidunt pretium ex. Nam at condimentum eros. Cras mattis urna at sapien tempor, ac hendrerit neque dignissim. Nunc sed elementum purus, ac pulvinar orci. Vivamus lacinia elementum lorem, quis tincidunt diam. Suspendisse semper lobortis quam, eget semper elit tempus ac.
Heading 6
Donec condimentum, mi tincidunt mollis consectetur, arcu leo porttitor velit, ultrices accumsan ante odio at dui. Sed eget laoreet lorem. Morbi imperdiet quam et suscipit efficitur. Fusce orci tortor, bibendum et tempus et, consectetur bibendum ante. Curabitur nulla risus, vestibulum in laoreet vitae, consectetur pharetra ex. Curabitur porttitor placerat metus in aliquet. Nunc scelerisque quam est, feugiat laoreet dui mattis semper.
<TextContainer>
<ExternalHtml>
{`<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus erat rhoncus bibendum
cursus. Maecenas a lorem egestas lorem porttitor scelerisque vel ac ante. Pellentesque ac
ullamcorper libero. Cras consectetur sem nunc, nec rhoncus justo porta quis.Mauris sapien
tellus, mattis ac pharetra et, accumsan pharetra felis.
</p>
<p>
Ut cursus condimentum urna, vel pellentesque mauris iaculis nec. Proin ac mauris est.
Suspendisse mollis rutrum dui, mattis cursus nunc dictum a. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit
amet, consectetur adipiscing elit.
</p>
<h3>Heading 3</h3>
<ul>
<li>Ut et varius justo, id molestie massa.</li>
<li>Cras mattis urna at sapien tempor, ac hendrerit neque dignissim</li>
<li>Sed iaculis leo vitae nunc auctor maximus.</li>
</ul>
<h4>Heading 4</h4>
<ol>
<li>Integer sodales vulputate pellentesque.</li>
<li>Pellentesque hendrerit et nisi quis aliquet.</li>
<li>Mauris sapien tellus, mattis ac pharetra et.</li>
</ol>
<h5>Heading 5</h5>
<p>
Fusce quis nulla ut odio hendrerit commodo. Nunc sed cursus erat. Nam ullamcorper sem est,
at molestie justo egestas sed. Etiam lectus quam, facilisis sed ipsum ut, tincidunt pretium
ex. Nam at condimentum eros. Cras mattis urna at sapien tempor, ac hendrerit neque
dignissim. Nunc sed elementum purus, ac pulvinar orci. Vivamus lacinia elementum lorem, quis
tincidunt diam. Suspendisse semper lobortis quam, eget semper elit tempus ac.
</p>
<h6>Heading 6</h6>
<p>
Donec condimentum, mi tincidunt mollis consectetur, arcu leo porttitor velit, ultrices
accumsan ante odio at dui. Sed eget laoreet lorem. Morbi imperdiet quam et suscipit
efficitur. Fusce orci tortor, bibendum et tempus et, consectetur bibendum ante. Curabitur
nulla risus, vestibulum in laoreet vitae, consectetur pharetra ex. Curabitur porttitor
placerat metus in aliquet. Nunc scelerisque quam est, feugiat laoreet dui mattis semper.
</p>`}
</ExternalHtml>
</TextContainer>#Properties
Heading 1
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus erat rhoncus bibendum cursus. Maecenas a lorem egestas lorem porttitor scelerisque vel ac ante. Pellentesque ac ullamcorper libero. Cras consectetur sem nunc, nec rhoncus justo porta quis.Mauris sapien tellus, mattis ac pharetra et, accumsan pharetra felis.
Ut cursus condimentum urna, vel pellentesque mauris iaculis nec. Proin ac mauris est. Suspendisse mollis rutrum dui, mattis cursus nunc dictum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading 3
- Ut et varius justo, id molestie massa.
- Cras mattis urna at sapien tempor, ac hendrerit neque dignissim
- Sed iaculis leo vitae nunc auctor maximus.
Heading 4
- Integer sodales vulputate pellentesque.
- Pellentesque hendrerit et nisi quis aliquet.
- Mauris sapien tellus, mattis ac pharetra et.
Heading 5
Fusce quis nulla ut odio hendrerit commodo. Nunc sed cursus erat. Nam ullamcorper sem est, at molestie justo egestas sed. Etiam lectus quam, facilisis sed ipsum ut, tincidunt pretium ex. Nam at condimentum eros. Cras mattis urna at sapien tempor, ac hendrerit neque dignissim. Nunc sed elementum purus, ac pulvinar orci. Vivamus lacinia elementum lorem, quis tincidunt diam. Suspendisse semper lobortis quam, eget semper elit tempus ac.
Heading 6
Donec condimentum, mi tincidunt mollis consectetur, arcu leo porttitor velit, ultrices accumsan ante odio at dui. Sed eget laoreet lorem. Morbi imperdiet quam et suscipit efficitur. Fusce orci tortor, bibendum et tempus et, consectetur bibendum ante. Curabitur nulla risus, vestibulum in laoreet vitae, consectetur pharetra ex. Curabitur porttitor placerat metus in aliquet. Nunc scelerisque quam est, feugiat laoreet dui mattis semper.
| Property | Description | Defined | Value |
|---|---|---|---|
childrenOptional | ReactNodeContent to be displayed inside the text container | ||
articleOptional | booleanStyle the text-container as article if set to true | ||
data-observe-keyOptional | stringUnique string, used by external script e.g. for event tracking | ||
classNameOptional | stringCustom className that's applied to the outermost element (only intended for special cases) | ||
styleOptional | objectStyle object to apply custom inline styles (only intended for special cases) |
#Guidelines
#Best practices
#Do not use when
#Accessibility
Explore detailed guidelines for this component: Accessibility Specifications